<template>
    <lightning-card title="测试lwc:if属性嵌套">
        <div>
            DOM状态不一致，导致：Uncaught (in promise) TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
        </div>
        <div style="text-align: center; margin: 20px 0px;">
            <lightning-button onclick={reloadData} variant="brand" label="刷新"></lightning-button>
        </div>

        <div style="width: 98%; position: relative;">
            <lightning-spinner lwc:if={isLoading} variant="brand" size="large"> </lightning-spinner>
            <table aria-multiselectable="true"
                class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-tree slds-table_tree"
                role="treegrid">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="slds-text-align_center freezeCol" scope="col" style="left: 0rem; width: 3rem;">
                            <input type="checkbox"
                                style="width: 1rem; height: 1rem;"
                                value="checkbox-unique-id-177" 
                                onclick={handleSelectAll}
                                />
                        </th>
                        <template for:each={freezeColumns} for:item="col">
                            <th key={col.label} scope="col" style={col.style} class="freezeCol">
                                <a class="slds-text-link_reset" href="#" role="button" tabindex="-1">
                                    <div class="slds-th__action slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                        <!-- <span class="slds-truncate" title={col.label}>{col.label}</span> -->
                                        <span class="wrap-text" title={col.label}>{col.label}</span>
                                    </div>
                                </a>
                            </th>
                        </template>
                        <template for:each={columns} for:item="col">
                            <th key={col.label} scope="col" style={col.style} class={col.class}>
                                <a class="slds-text-link_reset" href="#" role="button" tabindex="-1">
                                    <div class="slds-th__action slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                        <!-- <span class="slds-truncate" title={col.label}>{col.label}</span> -->
                                        <span class="wrap-text" title={col.label}>{col.label}</span>
                                    </div>
                                </a>
                            </th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={dataRows} for:item="row" for:index="idx">
                        <tr key={row.key} aria-level="1" aria-posinset={idx} aria-selected="false" aria-setsize={dataRows.length} class="slds-hint-parent"
                            tabindex="0">
                            <td class="slds-text-align_center freezeCol" role="gridcell" style="left: 0rem;">
                                <input type="checkbox" name="options" value={row.key}
                                    data-key={row.key}
                                    checked={row.isSelected}
                                    style="width: 1rem; height: 1rem;"
                                    onclick={handleRowCheckboxChange}
                                    />
                            </td>
                            <template lwc:if={row.hasChildren}>
                                <td class="slds-tree__item freezeCol firstCol" data-label={row.claimName} scope="row">
                                    <template lwc:if={row.expanded}>
                                        <lightning-button-icon 
                                            icon-name="utility:chevrondown" 
                                            alternative-text={row.claimName}
                                            variant="bare"
                                            data-idx={idx}
                                            onclick={toggleRowExpand}
                                            >
                                            </lightning-button-icon>
                                    </template>
                                    <template lwc:else>
                                        <lightning-button-icon 
                                        icon-name="utility:chevronright" 
                                        alternative-text={row.claimName}
                                        variant="bare"
                                        data-idx={idx}
                                        onclick={toggleRowExpand}
                                        >
                                        </lightning-button-icon>
                                    </template>
                                    <div class="slds-truncate" title={row.claimName}>
                                        <a href={row.claimDetailUrl} tabindex="-1" target="_blank">{row.claimName}</a>
                                    </div>
                                </td>
                            </template>
                            <template lwc:else>
                                <td class="slds-tree__item freezeCol firstCol" data-label={row.claimName} role="gridcell">
                                    <div class="slds-truncate" title={row.claimName}>
                                        <a href={row.claimDetailUrl} tabindex="-1" target="_blank">{row.claimName}</a>
                                    </div>
                                </td>
                            </template>
                            <td data-label={row.activityName} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.activityName}>
                                    <a href={row.activityDetailUrl} tabindex="-1" target="_blank">{row.activityName}</a>
                                </div>
                            </td>
                            <td data-label={row.activityType} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.activityType}>{row.activityType}</div>
                            </td>
                            <td data-label={row.claimantAccountName} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.claimantAccountName}>
                                    <a href={row.claimantAccountDetailUrl} tabindex="-1" target="_blank">{row.claimantAccountName}</a>
                                </div>
                            </td>
                            <td data-label={row.soldToAccountName} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.soldToAccountName}>
                                    <a href={row.soldToAccountDetailUrl} target="_blank" tabindex="-1">{row.soldToAccountName}</a>
                                </div>
                            </td>
                            <td data-label={row.mainClaimNo} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.mainClaimNo}>{row.mainClaimNo}</div>
                            </td>
                            <td data-label={row.invoiceRefrence} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.invoiceRefrence}>{row.invoiceRefrence}</div>
                            </td>
                            <td data-label={row.claimDate} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.claimDate}>{row.claimDate}</div>
                            </td>
                            <td data-label={row.invoiceDate} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.invoiceDate}>{row.invoiceDate}</div>
                            </td>
                            <td data-label={row.status} role="gridcell" class="freezeCol">
                                <div class="slds-truncate" title={row.status}>{row.status}</div>
                            </td>
                            <td data-label={row.quantity} role="gridcell">
                                <div class="slds-truncate" title={row.quantity}>{row.quantity}</div>
                            </td>
                            <td data-label={row.lineAmount} role="gridcell">
                                <div class="slds-truncate" title={row.lineAmount}>{row.lineAmount}</div>
                            </td>
                            <td data-label={row.adjustAmount} role="gridcell">
                                <div class="slds-truncate" title={row.adjustAmount}>{row.adjustAmount}</div>
                            </td>
                            <td data-label={row.chargeAmount} role="gridcell">
                                <div class="slds-truncate" title={row.chargeAmount}>{row.chargeAmount}</div>
                            </td>
                            <td data-label={row.taxAmount} role="gridcell">
                                <div class="slds-truncate" title={row.taxAmount}>{row.taxAmount}</div>
                            </td>
                            <td data-label={row.taxAdjstAmount} role="gridcell">
                                <div class="slds-truncate" title={row.taxAdjstAmount}>{row.taxAdjstAmount}</div>
                            </td>
                            <td data-label={row.expenseType} role="gridcell">
                                <div class="slds-truncate" title={row.expenseType}>{row.expenseType}</div>
                            </td>
                            <td data-label={row.chargeCode} role="gridcell">
                                <div class="slds-truncate" title={row.chargeCode}>{row.chargeCode}</div>
                            </td>
                            <td data-label={row.lineType} role="gridcell">
                                <div class="slds-truncate" title={row.lineType}>{row.lineType}</div>
                            </td>
                        </tr>
                        <template lwc:if={row.hasChildren} for:each={row.children} for:item="subRow" for:index="subIdx">
                        <!-- <template for:each={row.children} for:item="subRow" for:index="subIdx"> -->
                            <tr key={subRow.key} lwc:if={row.expanded} aria-level="2" aria-posinset={subIdx} aria-setsize={row.children.length} class="slds-hint-parent">
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td class="freezeCol"></td>
                                <td data-label={subRow.quantity} role="gridcell">
                                    <div class="slds-truncate" title={subRow.quantity}>{subRow.quantity}</div>
                                </td>
                                <td data-label={subRow.lineAmount} role="gridcell">
                                    <div class="slds-truncate" title={subRow.lineAmount}>{subRow.lineAmount}</div>
                                </td>
                                <td data-label={subRow.adjustAmount} role="gridcell">
                                    <div class="slds-truncate" title={subRow.adjustAmount}>{subRow.adjustAmount}</div>
                                </td>
                                <td data-label={subRow.chargeAmount} role="gridcell">
                                    <div class="slds-truncate" title={subRow.chargeAmount}>{subRow.chargeAmount}</div>
                                </td>
                                <td data-label={subRow.taxAmount} role="gridcell">
                                    <div class="slds-truncate" title={subRow.taxAmount}>{subRow.taxAmount}</div>
                                </td>
                                <td data-label={subRow.taxAdjstAmount} role="gridcell">
                                    <div class="slds-truncate" title={subRow.taxAdjstAmount}>{subRow.taxAdjstAmount}</div>
                                </td>
                                <td data-label={subRow.expenseType} role="gridcell">
                                    <div class="slds-truncate" title={subRow.expenseType}>{subRow.expenseType}</div>
                                </td>
                                <td data-label={subRow.chargeCode} role="gridcell">
                                    <div class="slds-truncate" title={subRow.chargeCode}>{subRow.chargeCode}</div>
                                </td>
                                <td data-label={subRow.lineType} role="gridcell">
                                    <div class="slds-truncate" title={subRow.lineType}>{subRow.lineType}</div>
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
        </div>
    </lightning-card>
</template>